<template>
	<z-nav-bar title="教练详情" transparentTitle="auto" :isBlack="false"></z-nav-bar>
	<view class="bg">
		<!-- 上面的背景图 -->
		<image :src="`${setting.oss_pub_domain}/app-img/student/bg.png`"></image>
	</view>
	<view>
		<view v-if="coachInfo.userId" class="coach">
			<image :src="`${setting.sImgUrl}/train/jk.png`" class="bgs"></image>
			<!-- 教练的头像 -->
			<view class="coach_head">
				<!-- 头像的图片 -->
				<image :src="setting.oss_pub_domain + coachInfo.avatar"></image>
				<!-- 点击发送信息给教练 -->
				<view class="message" @click="sendMessage">
					<image :src="`${setting.sImgUrl}/train/icon_tj.png`" mode=""></image>
					<text>发送消息</text>
				</view>
			</view>
			<!--  -->
			<view class="coach_info">
				<view class="coach_up">
					<view class="coach_name">{{ coachInfo.nickName }}</view>
					<!-- <image :src="`${setting.sImgUrl}/train/br.png`" mode=""></image> -->
				</view>
				<view class="coach_dowm">{{ coachInfo.introduce }}</view>
			</view>
			<!-- 分段器 -->
			<view class="lessons">
				<view class="option">
					<view v-for="(v, k) in items" :key="k" :class="{ active: k == current }" @click="change_items(k)">
						{{ v }}
						<view class="line" v-if="k == current"></view>
					</view>
				</view>
				<view class="divider2" />
				<view class="lessons_content">
					<!-- 私教课 -->
					<view class="private_lesson" v-show="current === 0">
						<z-no-data v-if="!course.list.length && !course.loading"></z-no-data>
						<view v-else class="detail">
							<view class="top-box flex_cc">
								<view class="switch flex_sbc">
									<view
										class="item"
										:class="{ 'uni-white-bg uni-color text-w': !topBox }"
										@click="switchTopBox(0)"
									>
										独立课程
									</view>
									<view
										class="item"
										:class="{ 'uni-white-bg uni-color text-w': topBox }"
										@click="switchTopBox(1)"
									>
										课程计划
									</view>
								</view>
							</view>
							<view v-if="topBox" class="plan-box">
								<view v-for="item in plan.list" :key="item.id" class="uni-mt-10">
									<view class="flex_sbc item" @click="item.showList = !item.showList">
										<view class="flex_sbc width-100">
											<view class="flex_fsc">
												<view class="flex_sh">第{{item.serialNumber}}阶段</view>
												<view class="uni-ml-24 u-line-1">{{ item.name }}</view>
											</view>
											<view class="uni-color-grey flex_sh">(课程{{ item.relStuCourseList ? item.relStuCourseList.length : 0 }}个)</view>
										</view>
										<view class="flex_fsc flex_sh">
											<image :src="`${setting.oss_pub_domain}/app-img/icon/${item.showList ? 'icon_drop-up': 'icon_drop-down'}.png`" class="icon-size-32"></image>
										</view>
									</view>
									<view v-if="item.showList">
										<view class="flex_fsc z-font-24 uni-ma-24">
											<view class="auxiliary-grey">预计课时：</view>
											<view class="uni-orange">{{ item.duration }}课时</view>
											<view class="line-spacing-vertical uni-mx-24"></view>
											<view class="auxiliary-grey">教学费：</view>
											<view class="uni-orange">{{ item.price }}</view>
										</view>
										<view v-for="course in item.relStuCourseList" :key="course.id" class="course-item-plan flex_sbc" @click="viewCourse(course)">
											<view class="uni-color-main flex_fsc">{{ course.name }}</view>
										</view>
									</view>
								</view>
							</view>
							<view v-else>
								<view
									:class="v.vis ? ['row', 'active'] : ['row']"
									@click="viewCourse(v)"
									v-for="(v, k) in course.list"
									:key="k"
								>
									<view class="course-item">
										<view class="flex_sbc">
											<view class="text_text">{{ v.name }}</view>
											<image
												@click.stop="change_private(k)"
												:src="`${setting.sImgUrl}/icon_drop-down.png`"
												class="icon-size-32"
											></image>
										</view>
										<view class="flex_sbc z-font-22 uni-585C66 uni-mt-16">
											<view>{{ v.beginTime }}</view>
											<view v-if="v.status == 2" @click.stop="change_private(k)">已结束</view>
											<view v-else class="uni-orange" @click.stop="change_private(k)">
												{{ v.overtime ? '已超时' : '未开始' }}
											</view>
										</view>
									</view>
									<view class="entry">
										<view class="rows" v-for="(val, key) in v.relQuestionSchemeList" :key="key">
											{{ val.name }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 体系课 -->
					<view class="public_lesson" v-show="current === 1">
						<z-no-data v-if="!openCourse.list.length && !openCourse.loading"></z-no-data>
						<view v-else class="entry">
							<navigator
								v-for="course in openCourse.list"
								class="row"
								hover-class="none"
								:url="`/pages/student/course/open?id=${course.id}`"
							>
								<image :src="setting.oss_pub_domain + course.material" mode="aspectFill"></image>
								<view class="right">
									<view>{{ course.name }}</view>
									<view class="second">
										<view>课程: {{ course.duration }}课</view>
										<view class="line"></view>
										<view>
											兑换:
											<text v-if="course.tuition">{{ course.tuition }}</text>
											<text v-else>免费</text>
										</view>
									</view>
									<view class="bottom">
										<view class="left">
											<image :src="setting.oss_pub_domain + course.instrutorAvatar"></image>
											<view>{{ course.instrutorName }}</view>
										</view>
										<view class="other">
											<image :src="`${setting.sImgUrl}/index/icon_drop-down@2x.png`"></image>
											<text>{{ course.buyCount }}</text>
										</view>
									</view>
								</view>
							</navigator>
						</view>
					</view>
					<!-- 提问列表 -->
					<view class="questions_list" v-show="current === 2">
						<view class="ask">
							<image :src="`${setting.sImgUrl}/train/icon_search.png`"></image>
							<view class="ask_content">训练遇到困难？向教练提问</view>
							<view class="ask_send" @click="addQuestion">
								<text>提问</text>
							</view>
						</view>
						<view class="search">
							<input
								placeholder="输入问题关键词"
								v-model="question.name"
								placeholder-class="placeholder"
							/>
							<image :src="`${setting.sImgUrl}/find/search.png`"></image>
						</view>
						<z-no-data v-if="!question.list.length && !question.loading"></z-no-data>
						<view v-else>
							<view
								class="entry"
								v-for="item in question.list"
								style="width: 686rpx; margin-left: 32rpx; padding-bottom: 16rpx"
							>
								<view class="flex_fsc" @click="viewAsk(item)">
									<image
										:src="setting.oss_pub_domain + (item.material ? item.material.split(',')[0] : item.coverImage)"
										style="height: 100rpx; width: 100rpx; flex-shrink: 0"
										mode="aspectFill"
									></image>
									<view class="uni-ml-16 width-100">
										<view>{{ item.description }}</view>
										<view class="flex_sbc">
											<view class="uni-585C66 z-font-22">{{ item.descriptionTagName }}</view>
											<view v-if="item.isUp == 1" class="resolve">已解答</view>
											<view v-else class="resolve" style="background: #999">未解答</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	courseOnlyStu,
	storehouseAllPackagePage,
	getQuestionsList,
	courseOnlyStuDetail,
	coachDetail,
	getUser,
	getStudentPlanList
} from '@/api/student';
import { getConversationld } from '@/api/message';
export default {
	data() {
		return {
			items: ['私教课', '体系课', '提问列表'],
			keys: ['course', 'openCourse', 'question'],
			current: 0,
			type: 0,
			coachInfo: {},
			course: {
				list: [],
				pageNum: 1,
				total: 0,
				loading: true
			},
			openCourse: {
				list: [],
				pageNum: 1,
				total: 0,
				loading: true
			},
			question: {
				list: [],
				pageNum: 1,
				total: 1,
				name: '',
				loading: true
			},
			plan: {
				list: [],
				pageNum: 1,
				total: 1,
				name: '',
				loading: true
			},
			topBox: 0
		};
	},
	methods: {
		switchTopBox(type) {
			this.topBox = type;
			this[type ? 'plan' : 'course'].pageNum = 1;
			this.getList(0);
		},
		async sendMessage() {
			const user = await getUser();
			const res = await getConversationld({
				fromId: user.userId,
				toId: this.instructorId
			});
			uni.navigateTo({
				url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + res,
				animationDuration: 300
			});
		},
		change_items(k) {
			this.current = k;
		},
		change_private(k) {
			const keyName = this.keys[this.current];
			this[keyName].list[k].vis = !this[keyName].list[k].vis;
		},
		getList(type) {
			// type 0 私教课 1 体系课 2 提问列表
			const listObj = [
				{
					funName: this.topBox ? getStudentPlanList : courseOnlyStu,
					keyName: this.topBox ? 'plan' : 'course'
				},
				{
					funName: storehouseAllPackagePage,
					keyName: 'openCourse'
				},
				{
					funName: getQuestionsList,
					keyName: 'question'
				},
				{
					funName: getStudentPlanList,
					keyName: 'plan'
				}
			];
			const keyName = listObj[type].keyName;
			const param = {
				pageNum: this[keyName].pageNum
			};
			if (type == 2) param.questionInstructorId = this.instructorId;
			else param.instructorId = this.instructorId;
			this[keyName].loading = true;
			listObj[type]
				.funName(param)
				.then((res) => {
					if (type == 0 && this.topBox == 0) {
						res.rows.forEach((item) => {
							item.overtime = Date.now() > new Date(item.beginTime).getTime();
						});
					}
					if (this[keyName].pageNum == 1) this[keyName].list = res.rows;
					else this[keyName].list.push(...res.rows);
					this[keyName].total = res.total;
					this[keyName].loading = false;
					console.log(this.plan);
				})
				.catch(() => {
					this[keyName].loading = false;
				});
		},
		viewCourse(item) {
			item.studentSide = 1;
			uni.setStorageSync('edit-course', item);
			uni.navigateTo({
				url: '/pages/course/details/details'
			});
		},
		addQuestion() {
			uni.setStorageSync('coach-detail', this.coachInfo);
			uni.navigateTo({
				url: '/pages/student/training/question',
				events: {
					editDone: (data) => {
						this.question.pageNum = 1;
						this.question.name = '';
						this.getList(2);
					}
				}
			});
		},
		viewAsk(item) {
			uni.setStorageSync('player-info', {});
			uni.setStorageSync('ask-details', item);
			uni.navigateTo({
				url: '/pages/ask-questions/details/details'
			});
		}
	},
	onLoad(opt) {
		if (opt.id) {
			coachDetail(opt.id).then((res) => {
				this.coachInfo = res;
			});
			this.instructorId = opt.id;
			this.getList(0);
			this.getList(1);
			this.getList(2);
		}
	},
	onPullDownRefresh() {
		const keyName = this.keys[this.current];
		this[keyName].pageNum = 1;
		if (this[keyName].name) this[keyName].name = '';
		this.getList(this.current);
	},
	onReachBottom() {
		const keyName = this.keys[this.current];
		if (this[keyName].list.length >= this[keyName].total) return;
		this[keyName].pageNum += 1;
		this.getList(this.current);
	}
};
</script>

<style lang="scss">
@import './css/coach-detail.scss';

.resolve {
	width: 130rpx;
	height: 50rpx;
	background: #008965;
	border-radius: 25rpx;
	color: #ffffff;
	line-height: 50rpx;
	text-align: center;
	font-size: 24rpx;
}
</style>
